<template>
  <div>
    <SelfTitle userName="企业用户" class="selfTitle"></SelfTitle>
    <p class="post-demand" @click="postDemand">
      <span>发布需求</span>
    </p>
    <div class="company-index">
      <div class="tableBox">
        <el-table
          border
          :data="demandList"
          style="width: 100%"
          :header-cell-style="{
            background: '#E9E9E9',
            color: '#606266',
            fontWeight: 600,
          }"
        >
          <el-table-column label="序号" width="50" type="index" align="center">
          </el-table-column>
          <el-table-column
            label="需求名称"
            width="100"
            align="center"
            class="demand-name"
          >
            <template slot-scope="scope">
              <div @click="enterReqDetail(scope.row.demand.id)">
                {{ scope.row.demand.demandName }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="demandDescribe"
            label="需求描述"
            align="center"
          >
            <template slot-scope="scope">
              <div class="reqDesc">{{ scope.row.demand.demandDescribe }}</div>
            </template>
          </el-table-column>
          <el-table-column label="已发送附件" width="100" align="center">
            <template slot-scope="scope">
              <div>
                <a
                  v-if="scope.row.demand.docFilesUrl"
                  :href="scope.row.demand.docFilesUrl+'?response-content-type=application/octet-stream'"
                  class="textUpload"
                  >点击下载</a
                >
                <div v-else>文件暂缺</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="relation.value"
            label="需求分类"
            align="center"
            width="150"
          >
          </el-table-column>
          <el-table-column label="关联项目" width="120" align="center">
            <template slot-scope="scope">
              <div>
                <div v-if="scope.row.project !== undefined || null">
                  {{ scope.row.project.projectName }}
                </div>
                <div v-else>暂无项目</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="项目附件" width="120" align="center">
            <template slot-scope="scope">
              <a
                v-if="scope.row.project !== undefined || null"
                :href="scope.row.project.docFilesUrl"
                class="textUpload"
                >点击下载</a
              >
              <div v-else>文件暂缺</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="demand.gmtCreated"
            label="发布时间"
            align="center"
            width="200"
          >
          </el-table-column>
          <el-table-column label="状态" width="100" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.demand.status == 0">未处理</div>
              <div v-if="scope.row.demand.status == 1">处理中</div>
              <div v-if="scope.row.demand.status == 2">处理完成</div>
              <div v-if="scope.row.demand.status == 3">需求关闭</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="assess"
            label="项目评分"
            width="120"
            align="center"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.project !== undefined || null">
                <div
                  class="reqAllAssess"
                  @click="subjectAssess(scope.row.project)"
                >
                  <i class="el-icon-remove-outline"></i>
                </div>
              </div>
              <div v-else>暂未创建项目</div>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="60">
            <template slot-scope="scope">
              <div>
                <el-button
                  type="text"
                  size="small"
                  @click="handleClick(scope.row)"
                  >编辑</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 发布需求 -->
    <el-dialog
      :visible.sync="createDemandVisible"
      width="35%"
      class="createDemand"
    >
      <h2>发布需求</h2>
      <el-form
        :model="demandForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        label-position="left"
      >
        <el-form-item label="需求名称" prop="demandName">
          <el-input
            v-model="demandForm.demandName"
            placeholder="请输入需求的名称"
          ></el-input>
        </el-form-item>

        <el-form-item label="需求描述" prop="demandDescribe">
          <el-input
            v-model="demandForm.demandDescribe"
            type="textarea"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="分  类" prop="categoryId">
          <el-select v-model="demandForm.categoryId">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="附  件" prop="docFilesUrl">
          <el-upload
            class="upload-demo"
            action="http://112.124.67.43:8088/iot/demand/fileUpload"
            :on-change="handleChange"
            :on-success="successEvent"
            :file-list="fileList"
            :limit="1"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传一个文件,如果需要上传多个文件,请上传压缩文件
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="备 注" prop="remarks">
          <el-input
            v-model="demandForm.remarks"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 4 }"
            placeholder="请输入内容"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div class="btn">
        <el-button type="primary" @click="getPostDemand">创建</el-button>
        <el-button @click="createDemandVisible = false">取消</el-button>
      </div>
    </el-dialog>
    <!-- 修改需求 -->
    <el-dialog
      :visible.sync="editDemandVisible"
      width="35%"
      class="createDemand"
    >
      <h2>修改需求</h2>
      <el-form
        :model="editDemandForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        label-position="left"
      >
        <el-form-item label="需求名称" prop="demandName">
          <el-input
            v-model="editDemandForm.demandName"
            placeholder="请输入需求的名称"
          ></el-input>
        </el-form-item>

        <el-form-item label="需求描述" prop="demandDescribe">
          <el-input
            v-model="editDemandForm.demandDescribe"
            type="textarea"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="分  类" prop="categoryId">
          <el-select v-model="editDemandForm.categoryId">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="附  件" prop="docFilesUrl">
          <el-upload
            class="upload-demo"
            action="http://112.124.67.43:8088/iot/demand/fileUpload"
            :on-change="handleChange"
            :on-success="successEventEdit"
            :file-list="fileList"
            :limit="1"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传一个文件,如果需要上传多个文件,请上传压缩文件
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="备 注" prop="remarks">
          <el-input
            v-model="editDemandForm.remarks"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 4 }"
            placeholder="请输入内容"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div class="btn">
        <el-button @click="editDemandVisible = false">取消</el-button>
        <el-button type="primary" @click="editPostDemand">确定</el-button>
      </div>
    </el-dialog>
    <!-- 项目评分 -->
    <el-dialog
      :visible.sync="subjectAssessVisible"
      width="35%"
      class="subjectAssessStyle"
    >
      <h2>项目评分</h2>

      <ul>
        <li>
          <span class="subjectOneTitle">
            <span>{{ project.projectName }}</span>
            <span class="subjectRoleStyle">
              <span v-if="project.projectStatus == 0">（已完成）</span>
              <span v-if="project.projectStatus == 1">（未完成）</span>
            </span>
          </span>
          <el-rate v-model="project.projectScore"> </el-rate>
        </li>
        <li v-for="(item, index) in subjectData" :key="'subject' + index">
          <span class="subjectOneTitle">
            <span>{{ item.name }}</span>
            <span class="subjectRoleStyle">（{{ item.position }}）</span>
          </span>
          <el-rate v-model="item.score"> </el-rate>
        </li>
      </ul>

      <div class="moreInfo">
        <span>备注</span>
        <el-input
          v-model="project.mark"
          type="textarea"
          :autosize="{ minRows: 4, maxRows: 4 }"
          placeholder="请输入内容"
        >
        </el-input>
      </div>

      <div class="btnBox">
        <el-button size="mini" type="primary" @click="saveProject()"
          >保 存</el-button
        >
        <el-button type="primary" size="mini" @click="cancleSaveProject()"
          >取 消</el-button
        >
      </div>
    </el-dialog>
    <!-- 在手机端展示 -->
    <p class="list">
      <span>需求列表</span>
      <span @click="addDemand"><i class="el-icon-circle-plus"></i></span>
    </p>
    <div class="tableBoxMobel">
      <ul>
        <li
          v-for="(item, index) in demandList"
          :key="index"
          @click="enterReqDetailMobel(item.demand.id)"
        >
          <span>{{ item.demand.demandName }}</span>
          <span v-if="item.project !== undefined || null">已领取</span>
          <span v-else>未领取</span>
        </li>
      </ul>
    </div>
    <!-- 分页组件 -->
    <el-pagination
      class="paginationPc"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[this.limit]"
      :page-size="this.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount"
    ></el-pagination>
    <el-pagination
      class="paginationPhone"
      small
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="this.limit"
      layout="prev, pager, next"
      :total="totalCount"
    >
    </el-pagination>
  </div>
</template>

<script>
import SelfTitle from "../../../components/SelfTitle.vue";
import {
  ReqDemandByUserId,
  ReqPostDemand,
  ReqCommentClass,
  ReqProjectMan,
  ReqProjectScore,
  ReqCheckScore,
  ReqEditDemand,
} from "../../../request/index";
export default {
  data() {
    return {
      // 当前页码
      currentPage: 1,
      // 数量
      limit: 8,
      // 总数
      totalCount: 10,
      createDemandVisible: false,
      // 需求以及项目信息
      demandList: [],
      // 发布需求
      demandForm: {
        demandName: "",
        demandDescribe: "",
        categoryId: "",
        docFilesUrl: "",
        enterpriseId: "",
        remarks: "",
      },
      editDemandForm: {},
      rules: {
        demandName: [{ required: true, message: "请输入需求名称" }],
        demandDescribe: [{ required: true, message: "请输入需求描述" }],
        categoryId: [{ required: true, message: "请选择需求分类" }],
      },
      value: "",
      // 文件列表
      fileList: [],
      // 项目评分
      subjectAssessVisible: false,
      project: {
        projectName: "",
        projectId: "",
        projectScore: 0,
        // 项目状态
        projectStatus: 0,
        mark: "",
      },
      // 评分数据
      subjectData: [{ name: "吴某某", position: "UI设计", score: 0 }],
      //需求选择
      options: [],
      // 修改需求弹窗
      editDemandVisible: false,
    };
  },
  methods: {
    // 发布需求
    postDemand() {
      this.createDemandVisible = true;
      this.ResCommentClass();
      this.demandForm = {};
    },
    addDemand() {
      this.$router.push("/self/company/addMemandMobile");
    },
    // 取消 应该将项目评分以及人员信息清空
    cancleSaveProject() {
      this.subjectAssessVisible = false;
      this.project = {};
      this.subjectData = {};
    },
    // 评分之前应该先去判断一下是否评分了
    async subjectAssess(data) {
      // 查询评分
      this.subjectAssessVisible = true;
      let form = {
        createdId: 2,
        scoredId: data.id,
      };
      try {
        let res = await ReqCheckScore(form);
        let score = JSON.parse(res.scoreEntity.scoreDetails);
        this.project = score.project;
        this.subjectData = score.users;
      } catch {
        // 项目没有评分  项目评分的人员信息
        this.project.projectName = data.projectName;
        this.project.projectId = data.id;
        this.project.projectStatus = data.status;
        this.ResProjectMan(data.id);
      }
    },
    enterReqDetail(id) {
      this.$router.push(`/self/company/compReqDetail?id=${id}`);
    },
    // 进入需求详情页手机端
    enterReqDetailMobel(id) {
      this.$router.history.push(`/self/company/compReqDetailMobile?id=${id}`);
    },
    //  分页打印有多少条
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.getAllDemand(val);
    },
    // 项目人员信息
    async ResProjectMan(id) {
      let data = {
        projectId: id,
      };
      let res = await ReqProjectMan(data);
      this.subjectData = res.scoreVo;
    },
    //保存评分
    saveProject() {
      let str = {
        project: this.project,
        users: this.subjectData,
      };
      let data = JSON.stringify(str);
      this.ResProjectScore(data);
      this.subjectAssessVisible = false;
    },
    // 保存分数信息  用户身份id为确定
    async ResProjectScore(str) {
      // 需要将分数信息变成一个json字符串
      let data = {
        createdId: 2,
        scoreDetails: str,
        scoredId: this.project.projectId,
        socreSource: 1001,
      };
      let res = await ReqProjectScore(data);
    },
    // 分页获取需求
    async getAllDemand(page) {
      let id = sessionStorage.getItem("id");
      let resDemand = await ReqDemandByUserId({
        id,
        page,
        limit: 8,
      });
      console.log(resDemand);
      this.demandList = resDemand.page.list;
      this.totalCount = resDemand.page.totalCount;
      console.log(resDemand);
    },
    // 发布需求
    async getPostDemand() {
      this.demandForm.enterpriseId = sessionStorage.getItem("id");
      let resDemand = await ReqPostDemand(this.demandForm);
      this.createDemandVisible = false;
      if ((resDemand.msg = "success")) {
        this.$message({
          type: "success",
          message: "项目创建成功",
        });
      }
      this.getAllDemand(1);
    },
    // 对文件列表操作
    handleChange(file, fileList) {
      this.fileList = fileList.slice(-3);
    },
    // 文件上传成功时
    successEvent(response, file, fileList) {
      this.demandForm.docFilesUrl = response.msg;
    },
    // 修改文件上传成功时
    successEventEdit(response, file, fileList) {
      this.editDemandForm.docFilesUrl = response.msg;
    },
    // 获取需求分类
    async ResCommentClass() {
      let res = await ReqCommentClass();
      this.options = res.category;
    },
    // 编辑
    handleClick(item) {
      this.editDemandVisible = true;
      this.editDemandForm = item.demand;
      console.log(item.demand);
    },
    // 确定
    async editPostDemand() {
      let res = await ReqEditDemand(this.editDemandForm);
      if (res.code == 0) {
        this.editDemandVisible = false;
        this.$message({
          type: "success",
          message: "需求修改成功",
        });
      }
    },
  },
  components: {
    SelfTitle,
  },
  async created() {
    await this.getAllDemand(1);
    // 获取需求分类
    await this.ResCommentClass();
  },
};
</script>

<style scoped>
.company-index {
  padding: 0 90px;
}
.index-row {
  background-color: rgb(255, 255, 255);
}
.list {
  display: none;
}
.post-demand {
  padding-left: 100px;
  margin: 50px 0;
  cursor: pointer;
}
.post-demand > span {
  background-color: #1b93c4;
  padding: 20px 120px;
  color: white;
  font-size: 20px;
  font-weight: 600;
  border-radius: 10px;
}
.paginationPhone {
  display: none;
}
.paginationPc {
  display: block;
}
@media screen and (max-width: 768px) {
  .company-index {
    padding: 0px;
  }
  .selfTitle,
  .post-demand {
    display: none;
  }
  .list {
    display: flex;
    background-color: rgb(51, 51, 51);
    color: rgb(255, 255, 255);
    justify-content: space-between;
    padding: 10px 15px;
  }
  .list :nth-child(2) {
    font-weight: 600;
    font-size: 20px;
    cursor: pointer;
  }
  .tableBox {
    display: none;
  }
  .tableBoxMobel {
    display: block !important;
  }
  .paginationPc {
    display: none;
  }
  .paginationPhone {
    display: block;
  }
}
/* 需求样式 */
.createDemand h2 {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  padding-bottom: 10px;
}
.btn {
  display: flex;
  justify-content: center;
}
.reqDesc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.textUpload {
  text-decoration: none;
  color: rgb(0, 0, 238);
}
/* 项目评分 */
.subjectAssessStyle h2 {
  color: white;
  font-weight: 600;
  font-size: 20px;
  text-align: center;
  line-height: 50px;
}

.btnBox {
  text-align: center;
  margin-top: 40px;
}

.btnBox .el-button {
  margin: 0px 30px;
  background: #1b93c4;
  padding: 10px 30px;
}

.subjectAssessStyle ul {
  text-align: center;
}

.subjectAssessStyle ul li {
  display: flex;
  line-height: 30px;
  font-size: 14px;
  color: white;
}

.subjectRoleStyle {
  color: #f0ab00;
}

.subjectOneTitle {
  display: flex;
}

.subjectOneTitle > :nth-child(1) {
  flex: 1;
  text-align: center;
}

.subjectOneTitle > :nth-child(2) {
  flex: 1;
  text-align: left;
}

.subjectAssessStyle ul li > :nth-child(n) {
  flex: 1;
}
.moreInfo {
  display: flex;
  width: 80%;
  margin: 10px auto;
}

.moreInfo > :nth-child(1) {
  flex: 1;
  color: white;
}

.moreInfo > :nth-child(2) {
  flex: 6;
}

/* 手机端样式 */
.tableBoxMobel {
  display: none;
}
.tableBoxMobel ul li {
  height: 50px;
  line-height: 50px;
  display: flex;
  padding: 0px 15px;
  border-bottom: 1px solid #eee;
  font-size: 14px;
}

.tableBoxMobel ul li:hover {
  background-color: #eee;
}

.tableBoxMobel ul li > :nth-child(n) {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tableBoxMobel ul li > :nth-child(2) {
  text-align: right;
}
.demand-name {
  cursor: pointer;
}
.paginationPc,
.paginationPhone {
  text-align: center;
}
</style>
